<template>
    <div class="AlbumComponent">
        <div class="uploadBox" v-if="isUser">
            <el-upload
            class="upload-demo"
            ref="upload"
            action="string" 
            :file-list="fileList"
            :auto-upload="false" 
            :http-request="addFile" 
            :on-remove="handleRemove"
            :on-preview="handlePreview" 
            :before-upload="checkImg"
            accept="image/gif, image/jpeg, image/png, image/bmp" 
            :limit="10" 
            :on-exceed="fileOver"
            >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button
                    style="margin-left: 10px;"
                    size="small"
                    type="success"
                    @click="submitUpload"
                >上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过10M</div>
            </el-upload>
        </div>
        <div class="albumList">
            <div class="albmCont" v-for="(f, index) in addFileList" v-bind:key="index">
                <div class="item">
                    <div class="imgBox" @click="showPhoto(f.url)" :style="{ backgroundImage: 'url(' + f.reUrl + ')' }"></div>
                    <div class="imgInfo">
                        <span>1</span>
                        <span>2</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="photoShow" v-if="photoShow">
            <div class="mask" @click="closeShowPhoto()"></div>
            <!-- 'http://localhost:80/' -->
            <div class="photo"><img :src="defaultPhoto" :alt="defaultPhoto"></div>
        </div>
    </div>
</template>

<script src="./album.js"></script>

<style lang="scss">
@import "./album.scss";
</style>
